<template>
  <div class="noshop" v-if="noShop">
    您还没有发布任何需求！
    <span class="pushBtn" @click="$router.push('/setting/pushneed')">发布需求，</span>坐享旺铺
  </div>
  <div class="contianer" v-else>
    <div class="find-search">
      <el-button class="btn" @click="$router.push('/setting/pushneed')">发布求租</el-button>
    </div>
    <div class="showfind">
      <div class="find-left">
        <cards :contentItem="item" v-for="(item,index) in searchList" :key="index"></cards>
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-size="limit"
            layout="total, prev, pager, next, jumper"
            :total="totals"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cards from "@/components/cardQuzu";
export default {
  data() {
    return {
      noShop: true,
      totals: 0,
      searchList: [],
      recommendList: [],
      page: 1,
      limit: 5,
      ischose: 1,
      shopTypeList: []
    };
  },
  components: {
    cards
  },
  created() {
    this.getMyShops();
    this.getShopeParts();
  },
  methods: {
    handleCurrentChange(e) {
      this.page = e;
      this.getMyShops();
    },
    chose(index) {
      this.ischose = index;
      this.getMyShops();
    },
    getShopeParts() {
      // 配套设施
      this.$http.get(this.$api.getShopsParts()).then(res => {
        if (res.data.code === 0) {
          this.$store.state.partsArr = res.data.Partss;
        }
      });
    },
    getMyShops() {
      this.$http
        .get(this.$api.getUserSeeks(), {
          params: {
            id: this.$store.state.userInfo.userId,
            page: this.page,
            limit: this.limit
          }
        })
        .then(res => {
          if (res.data.code === 0) {
            if (res.data.page) {
              this.noShop = false;
              this.searchList = res.data.page.list;
              this.totals = res.data.page.totalCount;
            } else {
              this.noShop = true;
            }
          }
        });
    }
  }
};
</script>
<style scoped lang="less">
.noshop {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background: #fff;
  color: #000;
  .pushBtn {
    color: #e41e1d;
    cursor: pointer;
  }
}
.find-search {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 10px;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
  .btn {
    color: #ff5001;
    background: none;
    border: 1px solid #ff5001;
    outline: 0;
  }
  div {
    span {
      cursor: pointer;
      margin-right: 15px;
    }
  }
}
.block {
  padding: 20px 0;
  text-align: center;
}
.find-left {
  background: #fff;
  width: 100%;
}
.showfind {
  margin: 20px 0;
  display: flex;
}
.contianer {
  text-align: left;
  line-height: 35px;
  font-size: 16px;
}
.find-chose {
  span {
    padding: 2px 5px;
  }
}
.choseActive {
  outline: 2px solid #ff5001;
}
</style>
